<template>
	<view>
		<view class="header-box">
			<view class="topLogo">
				<image class="logo" src="/static/image/logo.jpg" mode="aspectFit"></image>
			</view>
		</view>
		<!-- input输入框 -->
		<view class="" style="margin-top: -600rpx;">
			<view class="input-group">
				<view class="input-row">
					<image class="img" src="/static/image/login/phone.png" mode="widthFix"></image>
					<input class="input" maxlength="11" type="number" v-model="mobile" placeholder="请输入手机号"
						placeholder-style="color:#ccc;font-size:32rpx;" />
				</view>
				<view class="input-row border-bottom">
					<image class="img" src="/static/image/login/code.png" mode="widthFix"></image>
					<input class="input code-input" type="number" maxlength="6" placeholder="请输入验证码" v-model="captcha"
						placeholder-style="color:#ccc;font-size:32rpx;" />
					<button class="code-btn cu-btn bg-white get-button" @tap="sendCode">{{ CodeText }}</button>
				</view>
				<view class="input-row">
					<image class="img" src="/static/image/login/password.png" mode="widthFix"></image>
					<input class="input" v-model="password" placeholder="请输入密码"
						placeholder-style="color:#ccc;font-size:32rpx;" />
				</view>
				<view class="input-row">
					<image class="img" src="/static/image/login/phone.png" mode="widthFix"></image>
					<input class="input" maxlength="11" type="number" v-model="inviteCode"
						placeholder-style="color:#ccc;font-size:32rpx;" placeholder="请输入邀请码(必填)" />
				</view>
			</view>
			<view class="login-btn">
				<view class="subtn"><button type="primary" @click="loginClick">注册</button></view>
			</view>
			<view class="tips" @click.stop="$helper.to('/pages/views/login/login')">
				已有账号,<text>去登录></text>
			</view>
			<view class="login-xie">
				<image @click="clickX"
					:src="isCheckXie == false ? '/static/image/login/choose.png':'/static/image/login/choose_active.png'"
					mode="">
				</image>
				<view class="">
					点击同意<text @click.stop="$helper.to('/pages/views/login/userXy')">《用户协议》</text>和
					<text @click.stop="$helper.to('/pages/views/login/userYs')">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				CodeText: '获取验证码',
				CodeNumDown: 60,
				mobile: '',
				captcha: '', //验证码
				password: '', //密码
				inviteCode: '',
				isCheckXie: false, //协议状态
			};
		},
		methods: {
			// 点击协议
			clickX() {
				this.isCheckXie = !this.isCheckXie
			},
			// 发送验证码
			sendCode() {
				let ph = /^[1][0-9]{10}$/;
				if (!ph.test(this.mobile)) return this.$helper.toast('none', '请输入正确的手机号')
				this.downTime(this.CodeNumDown);
				let that = this;
				let params = {
					mobile: this.mobile,
					type: '1',
					is_test: '1'
				}
				that.$http.sendCode(params).then(res => {
					this.downTime(this.CodeNumDown)
					if (res.code === 1) {
						this.captcha = '9527'
						this.downTime(this.CodeNumDown);
					} else {
						this.$helper.toast('none', res.msg);
					}
				});
			},
			downTime(num) {
				if (num === 0) {
					this.CodeText = '获取验证码';
					num = 60;
					this.CodeNumDown = num;
					return;
				} else {
					num--;
					this.CodeText = num + 's后发送';
					this.CodeNumDown = num;
				}
				var _this = this;
				setTimeout(function() {
					_this.downTime(num);
				}, 1000);
			},
			// 注册
			loginClick() {
				let ph = /^[1][0-9]{10}$/;
				if (!ph.test(this.mobile)) return this.$helper.toast('none', '请输入正确的手机号')
				if (!this.captcha) return this.$helper.toast('none', '请输入验证码')
				if (!this.password) return this.$helper.toast('none', '请输入密码')
				if (this.isCheckXie == false) return this.$helper.toast('none', '请同意协议')
				let that = this;
				let params = {
					mobile: that.mobile,
					code: that.captcha,
					type: '1',
					password: that.password,
					invite_code: that.inviteCode
				}
				that.$http.registerUser(params).then(res => {
					if (res.code === 1) {
						that.$helper.toast('none', '注册完成！');
						setTimeout(() => {
							that.$helper.redirect('/pages/views/login/login')
						}, 500)
					} else {
						this.$helper.toast('none', res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.header-box {
		width: 100%;
		height: 950rpx;

		.topLogo {
			width: 100%;
			text-align: center;
			padding-top: 120rpx;

			.logo {
				width: 180rpx;
				height: 180rpx;
				margin: 0 auto;
				border-radius: 20px;
			}
		}
	}

	/*input输入框*/
	.input-group {
		padding: 32upx 75upx 20upx;

		.input-row {
			line-height: 105upx;
			height: 105upx;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 2upx solid #EEEEEE;
			transition: all 0.5s ease-in-out;

			.img {
				width: 32rpx;
				height: 42rpx;
				margin-right: 30upx;
			}

			.input {
				width: 100%;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #000;
				border: none;
			}

			.code-input {
				width: 400upx;
			}

			.code-btn {
				font-size: 24upx;
				display: block;
				line-height: 64upx;
				position: absolute;
				right: 0;
				top: calc(50% - 32upx);
				color: #000000;
				background-color: #fff;
			}
		}


		.invalid-feedback {
			font-size: 24upx;
			color: #c7000a;
			padding-top: 5px;
			padding-left: 20upx;
		}
	}

	/*登录按钮*/
	.login-btn {
		padding: 30upx 50upx;

		.subtn {
			margin-bottom: 30upx;

			button {
				height: 98px;
				background: rgba(51, 51, 51, 0.8);
				width: 100%;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				border-radius: 49rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				color: #FEC92F;
			}

			button::after {
				border: none;
			}
		}
	}

	.tips {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		color: #ccc;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;

		text {
			color: #000000;
		}
	}

	.login-xie {
		display: flex;
		font-weight: 400;
		font-size: 24rpx;
		color: #ccc;
		width: 480rpx;
		margin: 0 auto;
		bottom: 80rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%);

		image {
			width: 24rpx;
			height: 24rpx;
			margin: 7rpx 20rpx 0 0;
		}

		text {
			color: #000;
		}
	}
</style>